<template>
  <div :class="statusClass" class="text-center mb-6 py-3 rounded-lg transition-all duration-300">
    <p class="text-lg md:text-xl font-medium">{{ gameStatus }}</p>
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from '../stores/gameStore'
import { computed } from 'vue'

const game = useGameStore()

const gameStatus = computed(() => {
  if (game.winner) {
    return `${game.winner} 获胜！`
  } else if (!game.gameActive && game.board.every(cell => cell !== '')) {
    return "平局！"
  } else {
    return `玩家 ${game.currentPlayer} 的回合`
  }
})

const statusClass = computed(() => {
  if (game.winner) {
    return 'bg-green-100 text-green-800'
  } else if (!game.gameActive && game.board.every(cell => cell !== '')) {
    return 'bg-yellow-100 text-yellow-800'
  } else {
    return 'bg-slate-100 text-dark'
  }
})
</script>